<template>
  <div class="base-search-form">
    <BaseForm v-bind="searchConfig" v-model:formData="formData" @change="change">
      <template #line-handle>
        <div class="flex-row-end">
          <el-button type="primary" :icon="Search" @click="search">
            搜索
          </el-button>
          <el-button :icon="Refresh" @click="reset">重置</el-button>
          <slot></slot>
        </div>
      </template>
    </BaseForm>
  </div>
</template>

<script setup lang="js">
import { ref } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { initFormData } from "@/utils/init";

const emit = defineEmits(["handleSearch", "handleReset"]);
const props = defineProps({
  // 查询表单配置项
  searchConfig: {
    type: Object,
    required: true,
  }
});

// formData属性 应该动态决定
const formItems = props.searchConfig?.formItems ?? [];

// 根据配置生成数据结构
const formOriginData = initFormData(formItems);

// 搜索
const search = () => {
  emit("handleSearch", { ...formData.value });
};

// 重置
const reset = () => {
  initFormData(formItems, formData.value);
  emit("handleReset", null);
};

// 表单每一项change
const change = (value, field) => {
  // console.log(`表单属性发生变化->`, field)
  // console.log(`表单子项值发生变化->`, value)
}

// 表单绑定数据
const formData = ref(formOriginData);

defineExpose({ formData, reset });
</script>

<style scoped lang="less"></style>